// ---------- SERVICE-BLOCK ----------
.service-block {
  display: block;

  // ---------- SERVICE-BUTTON-BLOCK ----------
  &__button-block {
    display: flex;
    flex-flow: row wrap;

    .col-3 {
      width: 271px;
      height: 180px;
      padding: 0;

      .service-button {
        width: 100%;
        height: 100%;
        padding: 0;
        background-color: $brand-grey;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.078s all;
        border: 1px solid $brand-dark;

        .image-plane {
          display: flex;
          align-items: center;
          height: 70%;
        }

        .image-plane-active {
          display: none;
        }

        .text-plane {
          font-weight: 700;
          font-size: 18px;
          line-height: 22px;
          text-align: center;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          color: #FFFFFF;
        }
      }

      .service-button:hover {
        background-color: $brand-gold;
        opacity: 1;
        transform: scale(0.98);


        img:nth-child(1) {
          display: flex;
        }

        img:nth-child(2) {
          display: none;
        }
      }

      .service-button:active {
        background-color: $brand-gold;
        opacity: 0.7;
        transform: scale(0.96);

        img:nth-child(1) {
          display: flex;
        }

        img:nth-child(2) {
          display: none;
        }
      }
    }
  }
}

// ---------- SERVICE-BLOCK MEDIA ----------
@media (max-width: 1130px) {
  .service-block {
    margin-bottom: 30px;

    &__button-block {
      .col-3 {
        width: 25%;
      }
    }
  }
}

@media (max-width: 1000px) {
  .service-block {
    .title-block {
      max-width: 100%;
    }
  }
}

@media (max-width: 900px) {
  .service-block {
    height: 680px;

    &__button-block {
      justify-content: center;

      .col-3 {
        width: 33%;
      }
    }

  }
}

@media (max-width: 600px) {
  .service-block {
    height: 860px;
  }
}

@media (max-width: 580px) {
  .service-block {

    .service-block__button-block {
      .col-3 {
        width: 50%;
      }
    }
  }
}




